<template>
	<div class="pictures">
		<div class="item">
			<img src="../assets/images/nan1.png" />
			<div class="desc">Jules Borel Collection 祖尔斯系列</div>
			<div class="title">男士机械表</div>
			<div class="btn">立即选购</div>
		</div>
		<div class="item">
			<img src="../assets/images/nan2.png" />
			<div class="desc">Jules Borel Collection 祖尔斯系列</div>
			<div class="title">男士机械表</div>
			<div class="btn">立即选购</div>
		</div>
		<div class="item">
			<img src="../assets/images/nan3.png" />
			<div class="desc">Jules Borel Collection 祖尔斯系列</div>
			<div class="title">男士机械表</div>
			<div class="btn">立即选购</div>
		</div>
		<div class="item">
			<img src="../assets/images/nan4.png" />
			<div class="desc">Jules Borel Collection 祖尔斯系列</div>
			<div class="title">男士机械表</div>
			<div class="btn">立即选购</div>
		</div>
		<div class="item">
			<img src="../assets/images/nan5.png" />
			<div class="desc">Jules Borel Collection 祖尔斯系列</div>
			<div class="title">男士机械表</div>
			<div class="btn">立即选购</div>
		</div>
		<div class="item">
			<img src="../assets/images/nan6.png" />
			<div class="desc">Jules Borel Collection 祖尔斯系列</div>
			<div class="title">男士机械表</div>
			<div class="btn">立即选购</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			 
		},
		data() {
			return {
				 
			};
		},
		computed: {

		},
		methods: {

		},
		mounted() {

		}		 
	};
</script>

<style scoped>
	.pictures{
		width: 70vw;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.pictures .item{
		width: 33.333%;
		margin: 60px 0;
		font-size: 24px;	
		text-align: center;		
	}
	.pictures .item .desc{
		margin: 15px 0;
	}
	.pictures .item .title{
		margin: 15px 0;
	}
	.pictures .item img{
		width: 80%;
		margin: 0 auto;
	}
	.pictures .item .btn{
		background-color: #003151;
		color: #fff;
		width: 80%;
		margin: 0 auto;
		font-size: 18px;
		line-height: 48px;
		cursor: pointer;
	}
	.pictures .item .btn:hover{
		background-color: #E7001C;
	}
</style>
